<!-- /*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div>
    <DialogTemplate
      ref="DialogTemplateRef"
      v-bind="dialogData"
      @closeHanler="closeHanler"
    >
      <div slot="outerMain" style="padding: 0px 20px">
        <el-form :model="fromData" ref="formRef" :rules="rulesRul">
          <el-form-item label="采购设备名称" prop="title">
            <el-input
              :disabled="this.fromDisabled"
              placeholder="请输入"
              v-model="fromData.title"
            ></el-input>
          </el-form-item>

          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="采购价格" prop="price">
                <el-input
                  :disabled="this.fromDisabled"
                  placeholder="请输入"
                  v-model="fromData.price"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购数量" prop="shopNumber">
                <el-input
                  :disabled="this.fromDisabled"
                  placeholder="请输入"
                  v-model="fromData.shopNumber"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="简介" prop="introduction">
            <el-input
              :disabled="this.fromDisabled"
              v-model="fromData.introduction"
              type="textarea"
              :rows="7"
              resize="none"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item label="图片">
            <el-upload
              class="upload-demo"
              action="http://localhost:4000/upDataImgIntelligentElderlyCare"
              :on-success="onSuccess"
              :on-remove="onremove"
              :limit="1"
              :file-list="fileList"
              :disabled="this.fromDisabled"
              :on-exceed="onExceed"
              :before-upload="beforeUpload"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过10MB
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <div slot="outerFooter" v-if="!this.fromDisabled">
        <el-button @click="($event) => buttonClickHandler(0)">取消</el-button>
        <el-button type="primary" @click="($event) => buttonClickHandler(1)"
          >保存</el-button
        >
      </div>
      <div slot="outerFooter" v-else>
        <el-button @click="($event) => buttonClickHandler(0)">关闭</el-button>
      </div>
    </DialogTemplate>
  </div>
</template>

<script>
import DialogTemplate from "@/components/DialogTemplate.vue";
import UploadTemplate from "@/components/UploadTemplate.vue";
import { addpageMessage, editPageMessage } from "@/api/pageMessage";
import { dressingByScreening } from "@/components/config/index";
import { algorithm } from "@/components/config/index";
import _ from "lodash";
export default {
  components: {
    DialogTemplate,
    UploadTemplate,
  },
  name: "taskInFoDialog",
  data() {
    return {
      dialogData: {
        title: "默认为测试标题",
        outWidth: "50%",
        destroyOnClose: true,
        top: "40px",
      },
      uploadData: {
        action: "https://jsonplaceholder.typicode.com/posts/",
        limit: 1,
      },

      fromData: {
        title: "",
        price: "",
        shopNumber: "",
        introduction: "",
        imgsrc: [],
      },
      fileList: [],
      articleid: "",
      rulesRul: {
        title: [
          { required: true, message: "采购设备名称不能为空", trigger: "blur" },
        ],
        price: [{ required: true, message: "采购价格不能为空", trigger: "blur" }],
        shopNumber: [{ required: true, message: "采购数量不能为空", trigger: "blur" }],
        introduction: [
          { required: true, message: "简介不能为空", trigger: "blur" },
        ],
      },
      fromDisabled: true,
      titleType: "",
    };
  },
  methods: {
    //开启弹框
    handleOpen(val, titleType) {
      this.fileList = _.cloneDeep(val.imgsrc);
      //1.打开弹框，并为弹框赋值标题
      this.$refs.DialogTemplateRef?.openDialogOne();
      this.dialogData.title = "智能养老设备 -- " + titleType;
      //2.打开弹框后 判断里面的数据是否可以编辑
      this.titleType = titleType;
      if (titleType == "编辑" || titleType == "新增") {
        this.fromDisabled = false;
        if (titleType == "新增") {
          this.fromData.imgsrc = [];
          this.articleid = algorithm();
        } else if (titleType == "编辑") {
          this.fromData.imgsrc = _.cloneDeep(val.imgsrc);
          this.articleid = val.articleid;
        }
      } else {
        this.fromDisabled = true;
      }
      //3.为页面赋初始值
      if (val)
        this.fromData = dressingByScreening({ ...this.fromData }, { ...val });
    },
    //弹出框关闭的回调
    closeHanler() {
      this.fileList = [];
      this.$refs.formRef.resetFields();
    },
    //保存/取消按钮点击事件
    buttonClickHandler(type) {
      if (type) {
        this.$refs.formRef.validate((vaild) => {
          if (vaild) {
            this.fromData.type = 1;
            this.fromData.articleid = this.articleid;
            if (this.titleType == "新增") this.addDataFunction();
            else if (this.titleType == "编辑") this.editDataFunction();
          }
        });
      } else {
        //取消操作
        this.$refs.DialogTemplateRef?.closeDialogOne();
      }
    },

    handleRemove(file, imgsrc) {
      console.log(file, imgsrc);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, imgsrc) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + imgsrc.length
        } 个文件`
      );
    },
    beforeRemove(file, imgsrc) {
      console.log(file, imgsrc);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //新增数据
    addDataFunction() {
      addpageMessage(this.fromData).then((res) => {
        if (res.data.state == "200") {
          this.$refs.DialogTemplateRef?.closeDialogOne();
          this.$notify.success({ title: "提示", message: "添加成功" });
          this.$emit("resData", 1);
        } else this.$notify.error({ title: "提示", message: res.data.message });
      });
    },
    //编辑数据
    editDataFunction() {
      editPageMessage(this.fromData).then((res) => {
        if (res.data.state == 400)
          this.$notify.error({ title: "提示", message: res.data.message });
        else if (!res.data.acknowledged)
          this.$notify.error({ title: "提示", message: "编辑失败" });
        else {
          this.$notify.success({ title: "提示", message: "数据编辑成功" });
          this.$refs.DialogTemplateRef?.closeDialogOne();
          this.$emit("resData", "编辑");
        }
      });
    },
    onExceed() {
      this.$notify.error({ title: "提示", message: "只能上传一张图片" });
    },
    //上传成功的回调
    onSuccess(response, file, fileLis) {
      this.fromData.imgsrc = [];
      this.fromData.imgsrc.push(response.data);
      this.$notify.success({ title: "提示", message: "图片上传成功" });
    },
    //删除图片的回调
    onremove() {
      if (this.fromDisabled) return;
      this.fromData.imgsrc = [];
    },
    //上传前的回调函数
    beforeUpload(file) {
      if (
        file.type != "image/png" &&
        file.type != "image/jpeg" &&
        file.type != "image/jpg"
      ) {
        this.$notify.warning({
          title: "提示",
          message: "请上传指定格式的图片文件",
        });
        return false;
      }
      const is10M = file.size / 1024 / 1024 < 10;
      if (!is10M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped lang="less"></style>
